<!DOCTYPE html>
<html>
	<head>
		<mata charset="utf-8">
		<title>3D</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
		

			#box {
				/*形变样式，preserve-3d可以看到子元素的3D效果*/
				transform-style: preserve-3d;
				width: 200px;
				height: 200px;
				background-color:;
				margin: 300px 200px 0;
				
				transform: rotateY(45deg) rotateX(-45deg);
				animation:  rotate 2s linear infinite;
				/*光标*/
				cursor: pointer;

			}
			#box>div {
				width: 200px;
				height: 200px;
				/*文本居中*/
				text-align: center;
				/*行高*/
				line-height: 200px;
				/*字体大小*/
				font-size: 100px;
				/*字体加粗*/
				font-weight:  bold;
				/*字体颜色*/
				color: red;
				position: absolute;
				opacity: .6;
				/*背面隐藏
				backface-visibility:hidden;
*/

			}
			.a {
				transform: translateZ(100px);
				background-color: green;}
				
			.b {

				transform: rotateY(180deg) translateZ(100px);
				background-color: orange;
			}
			.c {
				transform: rotateX(90deg) translateZ(100px);
				background-color:blue;


			}
			.d {
				transform: rotateX(-90deg) translateZ(100px);
				background-color: green;
			}
			.e {

				transform: rotateY(-90deg) translateZ(100px);
				background-color: white;
			}
			.f {
				transform: rotateY(90deg) translateZ(100px);
				background-color: yellow;}
				@keyframes rotate {
					from{
						transform: rotateY(45deg) rotateX(0deg)
						rotateZ(45deg);
					}
					to {

						transform:rotateY(405deg)  rotateX(360deg) rotateZ(360deg);
					}

				}
				#box:hover {
					/*动画播放状态
					paused：暂停
					running;播放动画*/
					animation-play-state: paused;
				}


			



		</style>

	</head>
	<body>
		<div id="box">
			<div class="a">1</div>
			<div class="b">2</div>
			<div class="c">3</div>
			<div class="d">4</div>
			<div class="e">5</div>
			<div class="f">6</div>




		</div>
		<div id="box">
			<div class="a">1</div>
			<div class="b">2</div>
			<div class="c">3</div>
			<div class="d">4</div>
			<div class="e">5</div>
			<div class="f">6</div>




		</div>




	</body>
</html>